$(function () {
    // 4.分类数据的动态渲染
    // 所有文章类别接口
    // 请求地址：/admin/category/list
    // 请求方式：get
    // 请求参数：无
    // 4.1 发送ajax请求  
    function init() {
        $.ajax({
            // url: 'http://localhost:8080/api/v1/admin/category/list',
            url: bignew.category_list,
            dataType: 'json',
            // headers: {
            //     Authorization: localStorage.getItem('bignews_token_9')
            // },
            success: function (res) {
                // console.log(res);
                let renderResult = template('cataTemp', res);
                $('tbody').html(renderResult);
            },
            // error: function (err) {
            //     console.log(err);
            //     if (err.statusText === "Forbidden") {
            //         alert('未登录，请先登录');
            //         location.href = './login.html';
            //     }
            // }
        })
    }
    init();
    // 4.2 article_category.html页面中 使用模板引擎 渲染数据


    // 6.1 点击新增分类按钮 弹出新增模态框
    $('#xinzengfenlei').on('click', function () {
        $('#myModal').modal('show')
        $('.modal-title').text('新增分类')
        $('.btnopt').text('新增')
        // 受编辑影响--设置空
        $('#name').val('');
        $('#slug').val('');
    })

    //6.3封装实现 新增分类操作和编辑操作
    //不同的参数有  url data res.code
    function opt(url, data) {
        $.ajax({
            type: 'post',
            url: url,
            data: data,
            dataType: 'json',
            success: function (res) {
                if (res.code === 201 || res.code == 200) {
                    alert(res.msg);
                    $('#myModal').modal('hide')  //隐藏模态框
                    init();   //调用刷新数据列表
                }
            }
        })
    }

    //6.1.2 由于新增和编辑都使用同一个模态框，只能根据按钮 的 文本值不同，去区别对应的操作
    $('.btnopt').on('click', function () {
        //实现新增操作
        if ($(this).text() == '新增') {
            opt(bignew.category_add, $('form').serialize())
        } else {
            //实现编辑操作    
            // 获取id值，下面的代码段已经 设置id值保存在btnopt按钮中
            let id = $(this).attr('id')
            opt(bignew.category_edit, $('form').serialize() + "&id=" + id)
        }
    })


    //6.2.1 实现编辑分类操作
    // 新增完成后 才有编辑按钮 ，进行编辑操作-使用委托事件
    $('tbody').on('click', '.btnedit', function () {
        // console.log($('.btnopt').text);
        //1)弹出模态框，使用 跟新增一样的模态框,但是要改文字，'新增'代码段也要改
        $('#myModal').modal('show')
        //修改模态框文字
        $('.modal-title').text('编辑分类')
        $('.btnopt').text('编辑')

        //2)获取输入框内默认的文本数据-显示
        // 获取数据，数据是通过自定义属性的方式进行存储的
        // js原生：dom.dataset[key]  dom.dataset.key
        // jq：$().data().key 或者 $().data('key')
        // $().data():可以获取当前元素中所有data-开头的自定义属性值，以对象的方式返回
        // console.log($(this).data());
        let obj = $(this).data();
        $('#name').val(obj.name);
        $('#slug').val(obj.slug);
        //注意，此时点击新增分类按钮，会有默认显示文本数据，需设置空
        // 将id存储在某个  以后取值方便的 位置 (按钮的位置)
        $('.btnopt').attr('id', obj.id)
    })

    //6.4删除分类列表
    $('tbody').on('click', '.btndel', function () {
        // 请求地址：/admin/category/delete
        // 请求方式：post
        // 请求参数：id
        // 获取id，同理 先存储再获取，通过 添加自定义属性，结合模板引擎
        // console.log($(this).data());  //{id:8}
        //6.4.1  先存储
        // let obj = $(this).data();
        // $('.btndel').attr('id', obj.id)
        // //6.4.1  再获取
        // let id = $(this).attr('id');
        // // console.log(id);
        //！！！其实可以直接取！！！因为模板引擎+自定义属性 已生成id，模板引擎+自定义属性的优势就是获取数据方便！
        let id = $(this).data().id;
        //6.4.2 发送请求
        if (confirm('确定要删除该分类?')) {
            $.ajax({
                type: 'post',
                url: bignew.category_delete,
                data: { id },  //字段一定要跟后台相同
                dataType: 'json',
                success: function (res) {
                    // console.log(res);
                    if (res.code == 204) {
                        alert(res.msg);
                        init(); //重新获取（渲染）分类数据
                    }
                }
            })
        }
    })


})//入口函数结束
